<template>
  <div class="table-list">
    <el-table :data="tableData" class="width-per-100" element-loading-text="拼命加载中" v-loading="loading"
     element-loading-background="#2B2B2E" element-loading-spinner="el-icon-loading" :highlight-current-row="false">
      <el-table-column label="排名" width="81">
        <template slot-scope="scope">
          <div v-if="scope.row.rank<=3">
            <img v-if="scope.$index === 0" :src="rankingIcon1" />
            <img v-else-if="scope.$index === 1" :src="rankingIcon2" />
            <img v-else-if="scope.$index === 2" :src="rankingIcon3" />
          </div>
          <div v-else class="pad-l-15">
            {{scope.row.rank}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="主播" width="1401">
        <template slot-scope="scope">
          <div class="flex font-14 v-align-c">
            <div class="flex">
              <img class="width-60 height-60" :src="scope.row.avatar" alt="" style="border-radius:50%">
            </div>
            <span class="mar-l-15 font-white">{{scope.row.nickname}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderPrice" label="销售额(元)"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import rankingIcon1 from '@/assets/images/ranking-icon-1.png'
import rankingIcon2 from '@/assets/images/ranking-icon-2.png'
import rankingIcon3 from '@/assets/images/ranking-icon-3.png'
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      exportData: [],
      rankingIcon1,
      rankingIcon2,
      rankingIcon3
    }
  },
  mounted() {
    this.$bus.$on('getAnchorRecords', (data) => {
      this.tableData = []
      this.tableData = data
    })
    this.$bus.$on('loading', (res) => {
      this.loading = res
    })
  },
  methods: {
    // formatJson(filterVal, jsonData) {
    //   return jsonData.map(v => filterVal.map(j => v[j]))
    // }
    // 导出数据
    // exportTable() {
    //   this.tableData.forEach(item => {
    //     this.exportData.push({ rank: item.rank, nickname: item.nickname, orderPrice: item.orderPrice })
    //   })
    //   import('@/vendor/Export2Excel').then(excel => {
    //     const tHeader = ['排名', '主播', '销售额(元)']
    //     const filterVal = ['rank', 'nickname', 'orderPrice']
    //     const data = this.formatJson(filterVal, this.exportData)
    //     excel.export_json_to_excel({
    //       header: tHeader, // 表头 必填
    //       data: data, // 具体数据 必填
    //       filename: '主播信息', // 非必填
    //       autoWidth: true, // 非必填
    //       bookType: 'xlsx' // 非必填
    //     })
    //   })
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .table-list {
    /deep/ .el-table {
      color:rgba(255,255,255,0.5);
      .el-table__header th {
        background: #3A3A3E !important;
        color:rgba(255,255,255,0.5);
        border: none;
      }
      tr {
        background: #252529;
        height: 48px;
      }
      .el-table__row {
        height: 110px;
      }
      tr:hover>td { 
        background-color: #252529 !important; 
      }
      td {
        border-bottom: 1px solid #3A3A3E !important;
      }
      .el-table__empty-block {
        background: #252529;
        color:rgba(255,255,255,0.5);
      }
    }
    /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
      background-color: #252529 !important;
    }
    .sort-box {
      color: #1890FF;
      border: 1px solid #1890FF;
      border-radius: 4px;
      padding: 0px 9px;
    }
    .line-1{
      line-height: 1.4;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
  }
</style>